<template>
  <div>
    <el-container>
      <el-main>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column width="80" header-align="center" align="center" type="index" label="序号">
          </el-table-column>
          <el-table-column min-width="100" prop="ryName" label="人员名称" header-align="center" align="center">
          </el-table-column>
          <el-table-column label="合计" header-align="center" align="center">
            <el-table-column min-width="100" prop="jjJe" label="奖金总计(元)" header-align="center" align="center">
              <template slot-scope="scope">
                {{ $formatNum(scope.row.jjJe) }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" prop="jjJeDx" label="定向奖金(元)" header-align="center" align="center">
              <template slot-scope="scope">
                {{ $formatNum(scope.row.jjJeDx) }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" prop="jjJeFp" label="分配奖金(元)" header-align="center" align="center">
              <template slot-scope="scope">
              {{ $formatNum(scope.row.jjJeFp) }}
            </template>
            </el-table-column>
            <el-table-column min-width="100" prop="jjJeJk" label="加扣奖金(元)" header-align="center" align="center">
              <template slot-scope="scope">
              {{ $formatNum(scope.row.jjJeJk) }}
            </template>
            </el-table-column>
          </el-table-column>

          <el-table-column header-align="center" v-for="(item, index) in tableHeaders"
                            :key="index" :label="item.jjItemName">
            <el-table-column v-for="(subItem, subIndex) in item.jjSubItems" :key="subIndex" :label="subItem.isJjc==0?subItem.jjxName:subItem.jjxName+'(奖金池)'" header-align="center" align="center">
              <el-table-column min-width="100" :prop="'jjJeId'+subItem.jjxId+''" label="奖金小计(元)" header-align="center" align="center">
                <template slot-scope="scope">
                {{ $formatNum(scope.row['jjJeId'+subItem.jjxId]) }}
              </template>
              </el-table-column>
              <el-table-column min-width="100" :prop="'jjJeDxId'+subItem.jjxId+''" label="定向奖金(元)" header-align="center" align="center">
                <template slot-scope="scope">
                {{ $formatNum(scope.row['jjJeDxId'+subItem.jjxId]) }}
              </template>
              </el-table-column>
              <el-table-column min-width="100" :prop="'jjJeFpId'+subItem.jjxId+''" label="分配奖金(元)" header-align="center" align="center">
                <template slot-scope="scope">
                {{ $formatNum(scope.row['jjJeFpId'+subItem.jjxId]) }}
              </template>
              </el-table-column>
              <el-table-column min-width="100" :prop="'jjJeJkId'+subItem.jjxId+''" label="加扣奖金(元)" header-align="center" align="center">
                <template slot-scope="scope">
                {{ $formatNum(scope.row['jjJeJkId'+subItem.jjxId]) }}
              </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>

        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      tableHeaders: [],
      tableData: []
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    // data：部门奖金分配数据
    // header：奖金项大类
    // subHeader：奖金项小类
    init(data, header, subHeader) {
      this.tableData = data;
      this.tableHeaders = [];
      if (header != null && subHeader != null) {
        // 添加父奖金项
        for (const i in header) {
          this.tableHeaders.push({
            jjItemId: header[i].jjxId,
            jjItemName: header[i].jjxName,
            jjSubItems: []
          })
        }
        // 添加子奖金项
        for (const i in subHeader) {
          for(const j in this.tableHeaders) {
            if (this.tableHeaders[j].jjItemId === parseInt(subHeader[i].jjzxId)) {
              this.tableHeaders[j].jjSubItems.push({
                jjxId: subHeader[i].jjxId,
                jjxName: subHeader[i].jjxName,
                isJjc:subHeader[i].isJjc
              })
              break
            }
          }
        }
      }
    }


  }
}

</script>
<style scoped>

</style>
